<!--封闭差动（行星架输入）传动比分配-->
<template>
  <div class="all" style="width: 100%;height: 100%;overflow-x:auto;overflow-y:auto">
    <a-row class="all-row" style="height:100%;width: 100%">
      <a-col span="24" class="all-col" style="height: 100%">
        <div class="top">
          <div class="t-left">
            <div class="t-left-top">
              <div class="t-left-top-left">
                <div class="top-left-top">输入参数</div>
                <div class="top-left-btn">

                  <div class="t-left-btn-left">
                    <div class="t-left-btn-all">
                      <div class="t-left-btn-text">
                        <ul >
                          <li>总传动比</li>
                          <li>差动级最大宽径比上限值</li>
                          <li>封闭级最大宽径比上限值</li>
                        </ul>
                      </div>
                      <div>
                        <ul>
                          <li><input v-model="params_58.R0"  style="text-align: center"/></li>
                          <li><input v-model="params_58.B1min"   style="text-align: center" /></li>
                          <li><input v-model="params_58.B2min"   style="text-align: center"/></li>
                        </ul>
                      </div>
                    </div>

                    <div class="t-left-btn-left2">
                      <input  v-model="params_58.ratio_D2_D1_min"   class="left-text"  style="text-align: center;width: 50px"/>
                      <img :src="mid"  class="img" />
                      <input v-model="params_58.ratio_D2_D1_max"    class="right-text"  style="text-align: center;width: 50px"/>
                    </div>
                  </div>
                  <div class="t-left-btn-right">
                    <a-modal  title="齿数比限制值" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
                      <img :src="jump"  class="jump-img" />
                    </a-modal>
                    <div class="t-left-btn-right-top">
                      <div class="t-left-btn-right-top1">不均载数据</div>
                      <div class="t-left-btn-right-top2">齿数比限制值</div>
                      <div style="width: 30%;height: 80%">
                        <button class="t-left-btn-right-top3" @click="showModal">!</button>

                      </div>

                    </div>

                    <div class="t-left-btn-right-btn">
                      <div class="t-left-btn-right-all">
                        <div class="t-left-btn-right-text">
                          <ul >
                            <li>6个行星轮</li>
                            <li>5个行星轮</li>
                            <li>4个行星轮</li>
                            <li>3个行星轮</li>
                          </ul>
                        </div>
                        <div class="text-1">
                          <ul>
                            <li><input v-model="input.B[0]"   style="text-align: center"/></li>
                            <li><input v-model="input.B[1]"   style="text-align: center" /></li>
                            <li><input v-model="input.B[2]"   style="text-align: center"/></li>
                            <li><input v-model="input.B[3]"   style="text-align: center"/></li>
                          </ul>
                        </div>
                        <div class="text-2">
                          <ul >
                            <li><input  v-model="input.A[0]"   style="text-align: center"/></li>
                            <li><input  v-model="input.A[1]"   style="text-align: center" /></li>
                            <li><input  v-model="input.A[2]"   style="text-align: center"/></li>
                            <li><input  v-model="input.A[3]"    style="text-align: center"/></li>
                          </ul>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
              <div class="t-left-top-right">
                <button class="button" @click="tclick_11">计算</button>

              </div>
            </div>
            <div class="t-left-btn">
              <div class="t-left-btn-top">以外径最小为目标函数</div>

              <div class="t-left-btn-btn">
                <div class="t-left-btn-title">
                  <div class="title1">差动级行<br>星轮个数</div>
                  <div class="title2">封闭级行<br>星轮个数</div>
                  <div class="title3">差动级<br>齿数比</div>
                  <div class="title4">封闭级<br>齿数比</div>
                  <div class="title5">总体积<br>表征量</div>
                  <div class="title6">差动级齿圈<br>半径表征值</div>
                  <div class="title7">封闭级齿圈<br>半径表征值</div>
                  <div class="title8">差动级<br>齿宽径比</div>
                  <div class="title9">封闭级齿<br>圈宽径比</div>
                  <div class="title10">差动级实际<br>最大宽径比</div>
                  <div class="title11">封闭级实际<br>最大宽径比</div>
                  <div class="title12">封闭级与差<br>动级齿宽比</div>
                  <div class="title13">功率分流</div>


                </div>
                <div class="t-left-btn-num">
                  <table class="table-1">
                    <tr>
                      <td>{{ans.rd_matrix[0][0]}}</td>
                      <td>{{ans.rd_matrix[0][1]}}</td>
                      <td>{{ans.rd_matrix[0][2]}}</td>
                      <td>{{ans.rd_matrix[0][3]}}</td>
                      <td>{{ans.rd_matrix[0][4]}}</td>
                      <td>{{ans.rd_matrix[0][5]}}</td>
                      <td>{{ans.rd_matrix[0][6]}}</td>
                      <td>{{ans.rd_matrix[0][7]}}</td>
                      <td>{{ans.rd_matrix[0][8]}}</td>
                      <td>{{ans.rd_matrix[0][9]}}</td>
                      <td>{{ans.rd_matrix[0][10]}}</td>
                      <td>{{ans.rd_matrix[0][11]}}</td>
                      <td>{{ans.rd_matrix[0][12]}}</td>

                    </tr>
                    <tr>
                      <td>{{ans.rd_matrix[1][0]}}</td>
                      <td>{{ans.rd_matrix[1][1]}}</td>
                      <td>{{ans.rd_matrix[1][2]}}</td>
                      <td>{{ans.rd_matrix[1][3]}}</td>
                      <td>{{ans.rd_matrix[1][4]}}</td>
                      <td>{{ans.rd_matrix[1][5]}}</td>
                      <td>{{ans.rd_matrix[1][6]}}</td>
                      <td>{{ans.rd_matrix[1][7]}}</td>
                      <td>{{ans.rd_matrix[1][8]}}</td>
                      <td>{{ans.rd_matrix[1][9]}}</td>
                      <td>{{ans.rd_matrix[1][10]}}</td>
                      <td>{{ans.rd_matrix[1][11]}}</td>
                      <td>{{ans.rd_matrix[1][12]}}</td>
                    </tr>
                  </table>

                </div>
              </div>

            </div>
          </div>
          <div class="t-right">
            <img :src="picture1" class="picture-top">
          </div>
        </div>
        <div class="btn">
          <div class="btn-left">
            <div class="btn-left-top">以体积最小为目标函数</div>
            <div class="btn-left-btn">
              <div class="btn-left-btn-title">
                <div class="btn-title1">差动级行<br>星轮个数</div>
                <div class="btn-title2">封闭级行<br>星轮个数</div>
                <div class="btn-title3">差动级<br>齿数比</div>
                <div class="btn-title4">封闭级<br>齿数比</div>
                <div class="btn-title5">总体积<br>表征量</div>
                <div class="btn-title6">功率分流</div>


              </div>
              <div class="btn-left-btn-data">
                <table class="table-2">
                  <tr>
                    <td>{{ans.rm_matrix[0][0]}}</td>
                    <td>{{ans.rm_matrix[0][1]}}</td>
                    <td>{{ans.rm_matrix[0][2]}}</td>
                    <td>{{ans.rm_matrix[0][3]}}</td>
                    <td>{{ans.rm_matrix[0][4]}}</td>
                    <td>{{ans.rm_matrix[0][5]}}</td>
                  </tr>
                  <tr>
                    <td>{{ans.rm_matrix[1][0]}}</td>
                    <td>{{ans.rm_matrix[1][1]}}</td>
                    <td>{{ans.rm_matrix[1][2]}}</td>
                    <td>{{ans.rm_matrix[1][3]}}</td>
                    <td>{{ans.rm_matrix[1][4]}}</td>
                    <td>{{ans.rm_matrix[1][5]}}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="btn-right">
            <img :src="picture2" class="picture-btn">
          </div>
        </div>

      </a-col>
    </a-row>
  </div>
</template>

<script>
import picture1 from "@/assets/image/image_58_1.png";
import picture2 from "@/assets/image/image_58_2.png";
import mid from "@/assets/image/image_58_3 .png";
import jump from "@/assets/image/image_58_4.png";
import {closed_differential_planetary} from "@/api/file";


export default {
  created() {
    document.title='封闭差动（行星架输入）传动比分配'
    this.$store.state.file.key=58
  },
  title:"封闭差动（行星架输入）传动比分配",
  name: "closed_differential_planetary",
  data(){
    return {
      picture1,
      picture2,
      mid,
      jump,
      visible: false,
      confirmLoading: false,
      input:{
        A:[3,3.7,5.7,13.9],
        B:[1,1,1,1]
      },
      params_58:this.$store.state.file.dataList[58],
      ans:{
        rd_matrix:[['','','','','','','','','','','','',''],['','','','','','','','','','','','','']],
        rm_matrix:[['','','','','',''],['','','','','','']],
      }
    };
  },
  methods:{

    showModal() {
      this.visible = true;
    },
    //点击ok
    // eslint-disable-next-line no-unused-vars
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds';
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    //点击cancel
    // eslint-disable-next-line no-unused-vars
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
    tclick_11()
    {
      // eslint-disable-next-line no-undef
      this.params_58.A=this.input.A.toString();
      this.params_58.B=this.input.B.toString();
      closed_differential_planetary(this.params_58)
          .then( res =>{
            console.log("打印结果123456");
            console.log(res);
            this.ans = res;
            if(res.code==200){
              console.log("res.data");
              console.log(res.data);
            }
          })
          .catch(error =>{
            console.log(error);
          });
    },
    // shuzuchange(){
    //   //拼接字符串提交
    //   this.params_58.B=this.input.b1.toString()+","+this.input.b2.toString()+","+this.input.b3.toString()+","+this.input.b4.toString();
    //   this.params_58.A=this.input.a1.toString()+","+this.input.a2.toString()+","+this.input.a3.toString()+","+this.input.a4.toString();
    // }
  }

}
</script>

<style scoped>
.top{
  position: relative;

  height: 68%;
  width: 100%;
  margin-left: 10px;
}
.t-left{
  position: absolute;
  height: 100%;
  width: 70%;
  left:0%;

}
.t-left-top{
  height: 50%;
  width: 100%;

  position: relative;


}
.t-left-top-left{
  position: absolute;
  height: 95%;
  width: 80%;
  left:0;
  /*background-color: #c1bbbb;*/
  box-shadow: 2px 2px 5px rgb(213, 213, 213);

}
.top-left-top{
  height: 11%;
  width: 100%;
  background-color: #D7D7D7;
  font-size: 16px;
  font-family: Arial;
  font-style: normal;
}
.top-left-btn{
  height: 89%;
  width: 100%;

  position: relative;
}
.t-left-btn-left{
  position: absolute;
   background-color: #FFFFFF;
  left:0;
  width: 50%;
  height: 100%;
}
.t-left-btn-all{
  height: 65%;
  width: 100%;
  display: flex;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  margin-top: 10px;
}
.t-left-btn-text{
  width: 70%;
  height: 100%;
  margin-right: 20px;
  text-align: right;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
}
.t-left-btn-left2{
  position: relative;
  margin-left: 40px;
  height: 50px;
}
.left-text{
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
}
.img{
  position:absolute;
  width: 33.3%;
  height: 100%;
}
.right-text{
  position:absolute;
  left: 48%;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
}
.t-left-btn-right{
  position: absolute;
  right:0;
  width: 50%;
  height: 100%;
}
.t-left-btn-right-top{
  margin-left: 38%;
  height: 15%;
  width: 100%;
  display: flex;
}
.t-left-btn-right-top1{
  font-family: Arial;
  font-style: normal;
  font-size: 16px;

}
.t-left-btn-right-top2{
  margin-left: 12%;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
}
.t-left-btn-right-top3{
  height: 100%;
  width: 10%;
  background-color: #F2F2F2;
}
.jump-img{
  width: 80%;
  height: 80%;
  text-align: center;
}
.t-left-btn-right-btn{
  height: 85%;
  width: 100%;
   

}
.t-left-btn-right-all{
  display: flex;
  margin-left: 40px;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;

}
.t-left-btn-right-text{
  text-align: right;
  margin-right: 20px;
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  width: 80%;
}
.text-2{
  height: 100%;
  width: 80%;
  margin-left: 25px;
  margin-right: 10%;
}
.text-1{
  height: 100%;
  width: 80%;
}
.text-2 input
{
  width: 100%;
}
.text-1 input
{
  width: 100%;
}
.t-left-top-right{
  position: absolute;
  top:5%;
  height: 90%;
  width: 15%;
  right:0;
  background-color:#FFFFFF;
}
.button{
  font-family: Arial;
  font-style: normal;
  font-size: 18px;
  background-color: #16D585;
  color: #FFFFFF;
  border-bottom-style: solid;
  border-bottom-color: #797979;
  margin-top: 150px;
  margin-left: 50px;
  height: 15%;
  width: 50%;

}
.t-left-btn{
  height: 48%;
  width: 99%;
   
  box-shadow: 2px 2px 5px rgb(213, 213, 213);
}
.t-left-btn-top{
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  background-color: #D7D7D7;
  height: 12%;
  width: 100%;
}
.t-left-btn-btn{
  width: 100%;
  height: 88%;
}
.t-left-btn-title{
  position: relative;
  width: 100%;
  height: 25%;
   

}
.title1{
  font-family: Arial;
  font-style: normal;
  font-size: 13px;
  position: absolute;
  height: 100%;
   
  left:0;
}
.title2{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-left: 8%;
}
.title3{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-left: 16.9%;
}
.title4{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-top: 5px;
  margin-left: 24.4%;
}
.title5{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-top: 5px;
  margin-left: 32%;
}
.title6{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-top: 5px;
  margin-left: 37.5%;
}
.title7{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-top: 5.5px;
  margin-left: 45.5%;
}
.title8{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-top: 5px;
  margin-left: 53.5%;
}
.title9{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-top: 5px;
  margin-left: 60.7%;
}
.title10{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-top: 5px;
  margin-left: 67.5%;
}
.title11{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-top: 5px;
  margin-left:75%;
}
.title12{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-top: 5px;
  margin-left:82.5%;
}
.title13{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 60%;
  left: 0;
  margin-top: 15px;
  margin-left:90.8%;
}
.t-left-btn-num{

}
.table-1{
  margin-top:0%;
  border-radius:3px;
  margin-left: 40px;
}

.table-2{
  margin-top:0%;
  border-radius:3px;
  margin-left: 40px;

}
td{
  margin-left: 20px;
  font-size: 16px;
  height: 25px;
  width: 82px;
}
.t-right{
  position: absolute;
  height: 100%;
  width:30%;
  right: 0;
}
.picture-top{
  margin-left: 15px;
  margin-top: 0;
  width: 92%;
  height: 97%;
}
.btn{
  position: relative;
  height: 32%;
  width: 100%;
  margin-left: 10px;
}
.btn-left{
  position: absolute;
  height: 95%;
  left:0;
  width: 39.5%;
  box-shadow: 2px 2px 5px rgb(213, 213, 213);
}
.btn-left-top{
  font-family: Arial;
  font-style: normal;
  font-size: 16px;
  background-color: #D7D7D7;
  width: 100%;
  height: 12%;

}
.btn-left-btn{
  width: 100%;
  height: 88%;
}
.btn-left-btn-title{
  position: relative;
  width: 100%;
  height: 25%;
}
.btn-title1{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  padding-left: 20px;
}
.btn-title2{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-left: 16%;
}
.btn-title3{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-left:30%;
}
.btn-title4{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-left:42.8%;
}
.btn-title5{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 100%;
  left: 0;
  margin-left:56.5%;
}
.btn-title6{
  font-size: 13px;
  font-family: Arial;
  font-style: normal;
  position: absolute;
  height: 60%;
  left: 0;
  margin-top: 10px;
  margin-left:68.5%;
}
.btn-right{
  position: absolute;
  height: 100%;
  right:0;
  width: 60%;
}
.picture-btn{
  height: 98%;
  width: 99%;
}
</style>